<template>
  <div>
    <div class="zz"><p class="h3">注册</p></div>
    <div class="xx" @click="deng">
      <van-icon name="arrow-left"/>
    </div>
    <div class="shu">
      <div>
        <span class="hao">1.输入手机号> </span> <span style="color: red">  2.输入验证码</span>
        <span> > 3.设置密码</span>
      </div>
    </div>

    <div class="yan">
      <p class="yan1">验证码已发送到{{this.farePhone}}</p>
    </div>
    <div>
      <van-cell-group>
        <van-field v-model="value" placeholder="请输入短信中的验证码" v-on:input="checkInput"/>
      </van-cell-group>
    </div>

    <div class="yanzheng">
      <van-button type="danger" block @click="shezhimima">提交验证码</van-button>
    </div>

  </div>
</template>
<script>


export default {
  data() {
    return {
      value: '',
      code: '',
      farePhone:''

    }
  },
  methods: {
    //判断不能输入汉字
    checkInput() {
      const inputValue = this.value;
      const chineseRegex = /[\u4e00-\u9fa5]/;
      if (chineseRegex.test(inputValue)) {
        // 如果输入内容包含汉字，给出提示并清空输入框
        this.$toast.fail('请输入数字');
        this.value = '';
      }
    },
    //跳转到登录页面
    deng() {
      this.$router.push({path: '/login'})
    },
    //设置密码
    shezhimima() {
      //判断传递过来的验证码是否正确
      if (this.value == ''){
        return this.$toast.fail('验证码不能为空');
      }else {
        if (this.value == sessionStorage.getItem('code')) {
          // this.$router.push({path: '/SetPassword'})
          this.$router.push({path: '/SetPassword', query: {farePhone: this.farePhone}})
        } else {
          this.$toast.fail('验证码错误');
        }
      }
      }

    },

  created() {
    this.code = this.$route.query.code
    this.farePhone = this.$route.query.farePhone
    console.log(this.code)
    console.log(this.farePhone)
    // const tel = this.phone;
    // const start = tel.slice(0, 3);
    // const end = tel.slice(-4);
    // const maskedTel = start + '****' + end;
    // this.phone = maskedTel;
  }
}


</script>


<style>
.zz {
  width: 100%;
  height: 50px;
  margin-top: -16px;
}

.h3 {
  margin-top: 25px;
  text-align: center;
}

.xx {
  font-size: 20px;
  margin-top: -53px;
  color: whitesmoke;
}

.shu {
  width: 100%;
  height: 40px;
  background: white;
  margin-top: 10px;
}

.hao {
  margin-left: 40px;
}

.yan {
  width: 100%;
  height: 50px;
  background: rgba(231, 228, 228, 0.98);
  margin-top: -20px;
}

.yan1 {
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.kk {
  width: 100%;
  height: 10px;
  background: #e7e6e6;
  margin-top: -17px;
}

.yanzheng {
  margin-top: 10px;
}

</style>
